<template>
  <view class="card-series">
    <view class="right-level" :class="seriesTypeList[type].class" v-if="notTag">
      <img
        class="star-1"
        src="../img/star-4.png"
        mode="widthFix"
        alt=""
        v-for="(star, s) in num"
        :key="s"
      />
    </view>
    <image
      class="card-br"
      :src="seriesTypeList[type].br"
      mode="widthFix"
      lazy-load
    />
    <view class="content">
      <view class="cover">
        <image
          :src="item.goods_image_text || item.goods_image"
          mode="widthFix"
          :lazy-load="true"
        />
      </view>
      <view class="info">
        <view
          class="title nowrap_ellipsis"
          :style="fontSizeTitle"
          :class="[!notPrice ? 'center' : '']"
        >
          {{ item.goods_name }}
        </view>
        <view
          class="price nowrap_ellipsis"
          :style="fontSizePrice"
          v-if="notPrice"
        >
          参考价:￥{{ item.original_price }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { DRAW_TYPE } from '../extract/extract_config';

export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    type: {
      type: [String, Number],
      default: '1',
    },
    item: {
      type: Object,
      default: () => ({}),
    },
    size: {
      type: [String, Number],
      default: '24',
    },
    notTag: {
      type: Boolean,
      default: true,
    },
    notPrice: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 系列类型
      seriesTypeList: DRAW_TYPE,
    };
  },
  // 计算属性 适配者模式
  computed: {
    num() {
      return Number(this.type);
    },
    fontSizeTitle() {
      return `font-size: ${this.size}rpx`;
    },
    fontSizePrice() {
      return `font-size: ${this.size * 0.75}rpx`;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.card-series {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 188rpx;
  // min-height: 268rpx;

  .card-br {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .badge {
    position: absolute;
    top: -10rpx;
    left: calc(50% - 21rpx);
    width: 42rpx;
    height: 43rpx;
  }
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 188rpx;
    // min-height: 268rpx;
    .cover {
      margin: 0 auto;
      padding-top: 30rpx;
      box-sizing: content-box;
      width: 80%;
      height: 56%;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: space-between;
      position: absolute;
      bottom: 8%;
      left: 5%;
      // box-sizing: content-box;
      padding: 2% 6% 3%;
      width: 90%;
      background: rgba(112, 78, 0, 0.16);
      .title {
        font-size: 24rpx;
        font-weight: 800;
        color: #fff;
        &.center {
          text-align: center;
        }
      }
      .price {
        font-size: 17rpx;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  .right-level {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -22rpx;
    top: 26rpx;
    padding: 6rpx 4rpx;
    min-width: 34rpx;
    min-height: 30rpx;
    border-radius: 0 10rpx 10rpx 0;
    border-left-color: transparent !important;
    opacity: 0;
    animation: slide-in-left 1s linear 0.4s 1 normal forwards;

    &.z-b {
      background: rgba(255, 187, 0, 0.25);
      border: 2rpx solid #ffe977;
    }
    &.c-b {
      background: rgba(229, 58, 58, 0.25);
      border: 2rpx solid #ffbbc1;
    }
    &.o-b {
      background: rgba(229, 58, 201, 0.25);
      border: 2rpx solid #e1b7ff;
    }
    &.h-b {
      background: rgba(58, 161, 229, 0.25);
      border: 2rpx solid #c8d0e9;
    }
    &.n-b {
      background: rgba(227, 227, 227, 0.25);
      border: 2rpx solid #c8d0e9;
    }

    .star-1 {
      width: 24rpx;
      height: 22rpx;
      transform: scale(1.3);
      position: relative;
      top: 2rpx;
    }
  }
}
</style>
